<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()

// 返回按钮功能
const goBack = () => {
  router.back()
}

// 睡眠数据
const sleepData = ref({
  weeklyAverage: 7.2,
  recommended: 8,
  sleepEfficiency: 85,
  recentSleeps: [
    { date: '2024-01-15', startTime: '23:30', endTime: '06:45', duration: 7.25, deepSleep: 2.5, lightSleep: 4.0, remSleep: 0.75, quality: '良好' },
    { date: '2024-01-14', startTime: '23:15', endTime: '07:00', duration: 7.75, deepSleep: 2.75, lightSleep: 4.25, remSleep: 0.75, quality: '良好' },
    { date: '2024-01-13', startTime: '00:00', endTime: '06:30', duration: 6.5, deepSleep: 2.0, lightSleep: 3.75, remSleep: 0.75, quality: '一般' },
    { date: '2024-01-12', startTime: '22:45', endTime: '06:15', duration: 7.5, deepSleep: 3.0, lightSleep: 3.75, remSleep: 0.75, quality: '良好' },
    { date: '2024-01-11', startTime: '23:00', endTime: '06:30', duration: 7.5, deepSleep: 2.75, lightSleep: 3.75, remSleep: 1.0, quality: '良好' },
    { date: '2024-01-10', startTime: '23:45', endTime: '07:30', duration: 7.75, deepSleep: 2.5, lightSleep: 4.5, remSleep: 0.75, quality: '良好' },
    { date: '2024-01-09', startTime: '00:15', endTime: '07:15', duration: 7.0, deepSleep: 2.25, lightSleep: 4.0, remSleep: 0.75, quality: '一般' }
  ],
  sleepTips: [
    '保持规律的作息时间，每天尽量在相同时间入睡和起床',
    '睡前避免使用电子设备，屏幕发出的蓝光会抑制褪黑素分泌',
    '创建舒适的睡眠环境，保持卧室安静、黑暗和凉爽',
    '避免在晚上摄入咖啡因、大量食物和酒精',
    '睡前进行放松活动，如阅读、冥想或温水浴',
    '保持规律的运动习惯，但避免在睡前3小时内进行剧烈运动'
  ],
  sleepStages: [
    { name: '深睡眠', percentage: 35, color: '#4a6fa5', description: '身体修复和恢复的重要阶段' },
    { name: '浅睡眠', percentage: 55, color: '#90be6d', description: '睡眠的主要阶段，帮助身体放松' },
    { name: 'REM睡眠', percentage: 10, color: '#f94144', description: '与记忆和学习相关的睡眠阶段' }
  ]
})

// 获取睡眠质量的颜色
const getQualityColor = (quality) => {
  switch(quality) {
    case '良好':
      return '#28a745'
    case '一般':
      return '#ffc107'
    case '较差':
      return '#dc3545'
    default:
      return '#6c757d'
  }
}
</script>

<template>
  <div class="sleep-container">
    <!-- 返回按钮 -->
    <button class="back-button" @click="goBack">
      ← 返回
    </button>

    <!-- 页面标题 -->
    <h1 class="page-title">睡眠分析</h1>

    <!-- 睡眠概览卡片 -->
    <div class="sleep-card">
      <h2 class="card-title">睡眠概览</h2>
      <div class="sleep-overview">
        <div class="overview-item">
          <div class="overview-value">{{ sleepData.weeklyAverage.toFixed(1) }}</div>
          <div class="overview-label">平均睡眠时长(小时)</div>
        </div>
        <div class="overview-item">
          <div class="overview-value">{{ sleepData.sleepEfficiency }}%</div>
          <div class="overview-label">睡眠效率</div>
        </div>
        <div class="overview-item">
          <div class="overview-value">{{ sleepData.recommended }}</div>
          <div class="overview-label">建议睡眠时长(小时)</div>
        </div>
      </div>
    </div>

    <!-- 睡眠阶段卡片 -->
    <div class="sleep-card">
      <h2 class="card-title">睡眠阶段分布</h2>
      <div class="sleep-stages">
        <div class="stages-chart">
          <div 
            v-for="stage in sleepData.sleepStages" 
            :key="stage.name"
            class="stage-item"
            :style="{ backgroundColor: stage.color }"
          >
            <div class="stage-percentage">{{ stage.percentage }}%</div>
            <div class="stage-name">{{ stage.name }}</div>
          </div>
        </div>
        <div class="stages-legend">
          <div v-for="stage in sleepData.sleepStages" :key="stage.name" class="legend-item">
            <div class="legend-color" :style="{ backgroundColor: stage.color }"></div>
            <div class="legend-info">
              <div class="legend-name">{{ stage.name }}</div>
              <div class="legend-description">{{ stage.description }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 最近睡眠记录卡片 -->
    <div class="sleep-card">
      <h2 class="card-title">最近睡眠记录</h2>
      <div class="recent-sleeps">
        <div 
          v-for="sleep in sleepData.recentSleeps" 
          :key="sleep.date"
          class="sleep-item"
        >
          <div class="sleep-date">{{ sleep.date }}</div>
          <div class="sleep-info">
            <div class="sleep-time">
              <span>{{ sleep.startTime }}</span> - 
              <span>{{ sleep.endTime }}</span>
            </div>
            <div class="sleep-details">
              <span class="sleep-duration">{{ sleep.duration.toFixed(1) }} 小时</span>
              <span class="sleep-quality" :style="{ color: getQualityColor(sleep.quality) }">
                {{ sleep.quality }}
              </span>
            </div>
            <div class="sleep-stages-breakdown">
              <span>深睡: {{ sleep.deepSleep.toFixed(1) }}h</span>
              <span>浅睡: {{ sleep.lightSleep.toFixed(1) }}h</span>
              <span>REM: {{ sleep.remSleep.toFixed(1) }}h</span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 睡眠建议卡片 -->
    <div class="sleep-card">
      <h2 class="card-title">睡眠建议</h2>
      <div class="sleep-tips">
        <ul>
          <li v-for="(tip, index) in sleepData.sleepTips" :key="index">
            {{ tip }}
          </li>
        </ul>
      </div>
    </div>

    <!-- 睡眠趋势图表卡片 -->
    <div class="sleep-card">
      <h2 class="card-title">睡眠趋势</h2>
      <div class="sleep-trend">
        <div class="trend-chart">
          <div class="chart-axis">
            <div class="y-axis">
              <div>9h</div>
              <div>8h</div>
              <div>7h</div>
              <div>6h</div>
              <div>5h</div>
            </div>
            <div class="chart-bars">
              <div 
                v-for="sleep in sleepData.recentSleeps" 
                :key="sleep.date"
                class="trend-bar-container"
              >
                <div 
                  class="trend-bar" 
                  :style="{ height: (sleep.duration * 20) + 'px' }"
                ></div>
                <div class="trend-label">{{ sleep.date.slice(5) }}</div>
              </div>
            </div>
          </div>
        </div>
        <div class="trend-line">
          <div class="recommended-line"></div>
          <div class="recommended-label">建议睡眠时长</div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.sleep-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
  background-color: #f8f9fa;
  min-height: 100vh;
}

.back-button {
  background: none;
  border: none;
  font-size: 16px;
  color: #007bff;
  cursor: pointer;
  padding: 10px 0;
  display: flex;
  align-items: center;
  gap: 5px;
}

.back-button:hover {
  text-decoration: underline;
}

.page-title {
  text-align: center;
  color: #2c3e50;
  margin: 20px 0 30px;
  font-size: 28px;
}

.sleep-card {
  background: white;
  border-radius: 12px;
  padding: 25px;
  margin-bottom: 20px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.card-title {
  color: #34495e;
  margin-bottom: 20px;
  font-size: 20px;
  border-bottom: 2px solid #e1e8ed;
  padding-bottom: 10px;
}

.sleep-overview {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 20px;
}

.overview-item {
  text-align: center;
  padding: 15px;
  background-color: #f8f9fa;
  border-radius: 8px;
}

.overview-value {
  font-size: 24px;
  font-weight: bold;
  color: #3498db;
  margin-bottom: 5px;
}

.overview-label {
  font-size: 14px;
  color: #6c757d;
}

.sleep-stages {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.stages-chart {
  display: flex;
  height: 80px;
  border-radius: 8px;
  overflow: hidden;
}

.stage-item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: white;
  font-weight: bold;
  flex: 1;
}

.stage-percentage {
  font-size: 18px;
  margin-bottom: 5px;
}

.stage-name {
  font-size: 14px;
}

.stages-legend {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 10px;
}

.legend-color {
  width: 20px;
  height: 20px;
  border-radius: 4px;
}

.legend-info {
  display: flex;
  flex-direction: column;
}

.legend-name {
  font-weight: 500;
  color: #2c3e50;
}

.legend-description {
  font-size: 14px;
  color: #6c757d;
}

.recent-sleeps {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.sleep-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px;
  background-color: #f8f9fa;
  border-radius: 8px;
}

.sleep-date {
  font-weight: bold;
  color: #007bff;
  min-width: 100px;
}

.sleep-info {
  flex: 1;
  margin-left: 20px;
}

.sleep-time {
  font-size: 16px;
  color: #2c3e50;
  margin-bottom: 5px;
}

.sleep-details {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 5px;
}

.sleep-duration {
  font-size: 14px;
  color: #6c757d;
}

.sleep-quality {
  font-size: 14px;
  font-weight: 500;
}

.sleep-stages-breakdown {
  display: flex;
  gap: 20px;
  font-size: 13px;
  color: #6c757d;
}

.sleep-tips ul {
  padding-left: 20px;
  line-height: 1.8;
}

.sleep-tips li {
  color: #2c3e50;
  margin-bottom: 10px;
}

.sleep-tips li:last-child {
  margin-bottom: 0;
}

.sleep-trend {
  position: relative;
  padding: 20px;
  background-color: #f8f9fa;
  border-radius: 8px;
}

.chart-axis {
  display: flex;
  align-items: flex-end;
  height: 200px;
}

.y-axis {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  padding-right: 20px;
  font-size: 12px;
  color: #6c757d;
}

.chart-bars {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  height: 100%;
  flex: 1;
}

.trend-bar-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  max-width: 40px;
}

.trend-bar {
  width: 100%;
  background-color: #3498db;
  border-radius: 4px 4px 0 0;
  margin-bottom: 10px;
  transition: height 0.3s ease;
}

.trend-label {
  font-size: 12px;
  color: #6c757d;
  text-align: center;
}

.recommended-line {
  position: absolute;
  left: 60px;
  right: 20px;
  height: 2px;
  background-color: #e74c3c;
  background-image: repeating-linear-gradient(
    90deg,
    #e74c3c,
    #e74c3c 5px,
    transparent 5px,
    transparent 10px
  );
  top: 60px;
}

.recommended-label {
  position: absolute;
  left: 20px;
  top: 55px;
  font-size: 12px;
  color: #e74c3c;
  font-weight: 500;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .sleep-container {
    padding: 15px;
  }
  
  .sleep-overview {
    grid-template-columns: 1fr;
    gap: 15px;
  }
  
  .page-title {
    font-size: 24px;
  }
  
  .card-title {
    font-size: 18px;
  }
  
  .sleep-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  
  .sleep-info {
    margin-left: 0;
    width: 100%;
  }
  
  .sleep-details {
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
  }
  
  .sleep-stages-breakdown {
    flex-wrap: wrap;
    gap: 10px;
  }
  
  .stage-percentage {
    font-size: 16px;
  }
  
  .stage-name {
    font-size: 12px;
  }
}
</style>